
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy</title>
</head>
<body>
    <!--  vue3双向数据绑定原理：
        proxy:
            本质是构造函数，主要是对对象的操作进行代理，目前支持13中代理拦截方式
            Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，
            所以属于一种“元编程”（meta programming），即对编程语言进行编程。
            Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，
            都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
            Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
        支持13种拦截方式：
            get set deletePropety has ownKeys .....
    -->

    <script>

        // 明星
        let obj = {
            name: "jack",
            age: 20
        }

        let p = new Proxy(obj,{
            // 13种拦截方式
            // 获取
            get(target,prop){
                console.log("暂未读取权限")
                return target[prop]
            },
            // 设置
            set(target,prop,value){
                console.log("set")
                //检测年龄是否是一个数字
                if (isNaN(value)) {
                    console.log("不是数字")
                } else {
                    console.log("是数字")
                    return target[prop] = value
                }
            },
            has(target,prop){
                console.log("has");
                return  prop in  target
            },
            deleteProperty(target,prop){
                console.log("del");
                return  delete target[prop]
            },
            ownKeys(target){
                console.log("own");
                return  Reflect.ownKeys(target)
            }

        })

        // 1.读取拦截测试
        console.log(p.name);

        p.age = 21
        console.log(p.age);

        console.log("age" in p);
        

        delete p.age
        // console.log(p.age);
        
        

    </script>
</body>
</html>